/*eslint-disable*/
import React, { useRef } from "react";
import { useState } from "react";
import ReactDOM from "react-dom/client";
import { DemoOne } from "@/components/DemoOne";
import Dialog from "./components/Dialog";
import ClassComponent from "./components/ClassComponents";
import Task from "./views/Task.jsx";
import { ConfigProvider } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import "normalize.css";
import HooksDemo from "./components/HooksComponents";
import EffectDemo from "./components/UseEffectComponents";
import RefHooks from "./components/RefHooks";
import UseMemoComp from "./components/UseMemoComp";
import TongxinComp from "./components/TongxinComp/TongxinComp";
import Parent from "./components/ReducComp/Parent";
import App from "./App";
import TaskOaReduxExplame from "./views/TaskOaReduxExplame";
import SagaViews from "./views/SagaViews";
import store from "./store/redux-saga";
import { Provider } from "react-redux";
import RouterV6 from "./views/RouterV6";
// import axios from 'axios';
// import Router from "./Router";
const root = ReactDOM.createRoot(document.getElementById("root"));

/* 需求一：判断元素隐藏显示*/
// 创建一个函数组件
// function App () {
//   const [flag, setFlag] = useState(false);

//   const handleClick = () => {
//     setFlag(!flag);
//   };

//   const data = [
//     {
//       id: 1,
//       title: "标题1",
//     },
//     {
//       id: 2,
//       title: "标题2",
//     },
//     {
//       id: 3,
//       title: "标题3",
//     },
//   ];

//   let styleObj = {
//     color: "blue",
//     fontSize: "20px",
//   };
//   return (
//     <>
//       <button
//         style={{ display: flag ? "block" : "none" }}
//         onClick={handleClick}
//       >
//         按钮1
//       </button>
//       <br />
//       {!flag && <button onClick={handleClick}>按钮2</button>}
//       <ul>
//         {data.map((item) => (
//           <li key={item.id}>{item.title}</li>
//         ))}
//       </ul>
//       <h2 className="title" style={styleObj}>
//         是我
//       </h2>
//     </>
//   );
// }

/**
 * 函数组件设置ref 属性 forwardRef 转发ref 给子组件
 */
root.render(
  // <React.StrictMode>
  // </React.StrictMode> // 严格模式，会额外检查组件渲染的性能问题
  <>
    <ConfigProvider locale={zhCN}>
      <RouterV6 />
      {/* <Router /> */}
      {/* <Provider store={store}>
        <SagaViews />
      </Provider> */}
      {/* <TaskOaReduxExplame /> */}
      {/* <Parent /> */}
      {/* <App /> */}
      {/* <TongxinComp /> */}
      {/* <UseMemoComp /> */}
      {/* <RefHooks/> */}
      {/* <EffectDemo title="useEffect" /> */}
      {/* <HooksDemo title="HOOKS"/> */}
      {/* <ConfigProvider locale={zhCN}>
      <Task />
    </ConfigProvider> */}
      {/* <App />
    <DemoOne className="demo-box-1" title={"传过来的标题1"}>
      <div slot="header">我是头部</div>
      <div slot="middle">我是中部</div>
      <div slot="footer">我是尾部</div>
    </DemoOne>
    <DemoOne className="demo-box-2" title={"传过来的标题2"} />
    <Dialog title="友情提示" content="大家做好个人出门防护！" />
    <Dialog content="我们一定要学好react！">
      <button>确定</button>
      <button>非常确定</button>
    </Dialog>
    <ClassComponent title="类组件" /> */}
    </ConfigProvider>
  </>
);
